﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testpage.aspx.cs" Inherits="BugSysSolution.AnalyzeXML.testpage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Style/site.css" rel="stylesheet" type="text/css" />
    <link href="../Javascript/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
    <script src="../Javascript/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../Javascript/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    <script src="../Javascript/common.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div1" style="border: 1px solid red; position: absolute; width: 500px; height: 500px;
        top: 0px; left: 0px">
        <table class="tab" id="tab1">
            <tr>
                <td colspan="2">
                    JS解析XML
                </td>
            </tr>
            <tr>
                <td>
                    姓名:
                </td>
                <td>
                    <input type="text" id="txt_name" />
                </td>
            </tr>
            <%--<tr>--%>
                <td>
                    年龄:
                </td>
                <td>
                    <input type="text" id="txt_age" />
                </td>
            </tr>
            <tr>
                <td>
                    地址:
                </td>
                <td>
                    <input type="text" id="txt_address" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="btnAdd" value="Add" class="btn" />
                    <input type="button" id="btnSave" value="Edit" class="btn" />
                    <input type="button" id="btnDel" value="Delete" class="btn" />
                </td>
            </tr>
        </table>
    </div>
    <div style="border: 1px solid black; display: none; text-align: center" id="loading">
        loading...</div>
    </form>
    <div id="addinfo" style="display: none">
        <table class="tab" id="Table1">
            <tr>
                <td colspan="2">添加新的节点</td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input type="text" id="Text1" /></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input type="text" id="Text2" /></td>
            </tr>
            <tr>
                <td>地址:</td>
                <td><input type="text" id="Text3" /></td>
            </tr>
            <tr>
                <td>工作:</td>
                <td><input type="text" id="Text4" /></td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td><input type="text" id="Text5" /></td>
            </tr>
        </table>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#addinfo").dialog({
            autoOpen: false,
            height: 500,
            width: 500,
            modal: true,
            resizable: true,
            title: "添加新节点",
            buttons: {
                '确定': function () {
                    obj.add();
                },
                '关闭': function () {
                    $("#addinfo").dialog("close");
                }
            },
            close: function () {
                $("body").css("overflow-x", "auto");
            }
        });
    })
    
    function ChangeStyle() {
        $("#tab1 tr td input[type=text]").each(function () {
            $(this).attr("disabled", "disabled");
        })
        verview_reinput($("#tab1 tr td input[type=text]"));
        //创建覆盖的div
        $("#loading").css("display", "block");
    }

    var xml = function () {
        this.init = function () {
            SendAjax("get", "testxml.xml", null, "xml", function (data) {
                $(data).find("student").each(function () {
                    if ($(this).find("name").text() == "张三") {
                        $("#txt_name").val($(this).find("name").text());
                        $("#txt_age").val($(this).find("age").text());
                        $("#txt_address").val($(this).find("address").text());

                        $("#loading").css("display", "none");
                        //保存数据源
                        $("#div1").data("source", data);
                        $("#btnSave").removeAttr("disabled", "disabled");
                        $("#btnDel").removeAttr("disabled", "disabled");
                    }
                })
            });
        }

        var tempobj = this;
        this.update = function () {
            if ($("#btnSave").val() == "Save") {
                var parm = {
                    tag: "update",
                    name: $("#txt_name").val(),
                    age: $("#txt_age").val(),
                    address: $("#txt_address").val()
                };
                SendAjax("post", "xmlajaxrequest.aspx", parm, "", function (data) {
                    if (data == "Success") {
                        tempobj.init();
                        $("#btnSave").val("Edit");
                        verview_reinput($("#tab1 tr td input[type=text]"));
                    }
                })
                return;
            }
            if ($("#btnSave").val() == "Edit") {
                $("#tab1 tr td input[type=text]").each(function () {
                    $(this).css("border", "1px solid black").removeAttr("readonly");
                })
                $("#btnSave").val("Save");
                return;
            }
        }
        this.add = function () {
            var parm = {
                tag: "add",
                name: $("#Text1").val(),
                age: $("#Text2").val(),
                address: $("#Text3").val(),
                job: $("#Text4").val(),
                like: $("#Text5").val()
            };
            SendAjax("post", "xmlajaxrequest.aspx", parm, "", function (data) {
                if (data == "Success") {
                    alert("添加成功")
                }
            });
        }

        this.del = function () {
            var parm = { tag: "del", name: $("#txt_name").val() };
            SendAjax("post", "xmlajaxrequest.aspx", parm, "", function (data) {
                if (data == "Success") {
                    alert("删除成功");
                    $("#txt_name").val("");
                    $("#txt_age").val("");
                    $("#txt_address").val("");
                    $("#addinfo").dialog("close");
                }
            });
        }
    }
    ShowLoadingDiv($("#div1"));
    ChangeStyle();
    var obj = new xml();
    obj.init();

    $("#btnSave").click(function () {
        obj.update();
    })

    $("#btnAdd").click(function () {
        $("#addinfo").dialog("open");
    })
    $("#btnDel").click(function () {
        obj.del();
    })
</script>
